import { Mask, Toast } from 'antd-mobile'
import { useEffect, useState } from 'react'
// import { useNavigate } from "react-router-dom";
import { GetUserInfo, SignIn, SignGift } from '../../api/mine'
import NavBar from '../../components/Navbar'
import './index.less'
import { compareVersions, getVersion, isIOS } from '../../utils/util'
import appSdk from '../../utils/app_sdk'

const data = [{ point: 10 }, { point: 10 }, { point: 10 }, { point: 10 }, { point: 10 }, { point: 10 }, { point: 10 }]
// 2：礼物 4：头像框 5：气泡框 6：进场特效
const giftType = {
  2: '礼物',
  4: '头像框',
  5: '气泡框',
  6: '进场特效'
}

export default function SignInTask() {
  // const navigate = useNavigate();
  const [userInfo, setUserInfo] = useState({ mizuan: 0, today_is_sign: 0, sign_nums: 0, vipLevel: 0 }) // today_is_sign 今天是否签到 | nums 天数

  const [giftList, setGiftList] = useState([])
  const [selectGift, setSelectGift] = useState()
  const [giftVisible, setGiftVisible] = useState(false)
  const [giftStatus, setGiftStatus] = useState(false) // 领取状态 true 领取

  const getUser = () => {
    GetUserInfo().then((res) => {
      setUserInfo(res.data)
      const { today_is_sign, sign_nums } = res.data
      console.log(`当前签到状态 today_is_sign：${today_is_sign} sign_nums: ${sign_nums}`)
      setGiftStatus(Number(sign_nums) === 7 && Boolean(today_is_sign))
    })
    SignGift().then((res) => {
      console.log(res)
      setGiftList(res.data || [])
    })
  }

  const [barHeight, setBarHeight] = useState(0)
  useEffect(() => {
    getUser()
    console.log(
      `%c Version = ${getVersion() || '1.0.0'} %c`,
      'background:#41b883 ; padding: 4px; border-radius: 4px;  color: #fff',
      'background:transparent'
    )
    if (compareVersions(getVersion() || '1.0.0', '2.2.0') !== -1) {
      appSdk('setFullScreen', 1)
      if (window?.android && window?.android?.getStatusBarHeight) {
        if (window.android.getStatusBarHeight()) {
          setBarHeight(window.android.getStatusBarHeight() / window.devicePixelRatio)
        }
        console.log('拿到状态栏高度', window.android.getStatusBarHeight(), window.devicePixelRatio)
      } else if (isIOS()) {
        appSdk('getStatusBarHeight', null, (res) => {
          console.log('拿到ios状态栏高度', res, window.devicePixelRatio)
          setBarHeight(res / window.devicePixelRatio)
        })
      }
    }
  }, [])

  const signIn = () => {
    if (userInfo.today_is_sign) return false
    if (userInfo.sign_nums === 6) {
      setGiftVisible(true)
    } else {
      SignIn()
        .then(() => {
          getUser()
          Toast.show({
            icon: 'success',
            content: '签到成功'
          })
        })
        .catch((err) => {
          Toast.show({
            content: err.message || '系统异常'
          })
        })
    }
  }

  const getGift = () => {
    // setGiftVisible(false);

    if (userInfo?.sign_nums >= 6) {
      if (!selectGift) {
        Toast.show({
          content: '请选择你要领取的奖品～'
        })
        return false
      }
      SignIn({
        ware_id: selectGift
      })
        .then(() => {
          getUser()
          Toast.show({
            icon: 'success',
            content: '签到成功'
          })
        })
        .catch((err) => {
          Toast.show({
            content: err.message || '系统异常'
          })
        })
    } else {
      setGiftVisible(false)
    }
  }

  return (
    <div className="soginIn_wrap">
      <NavBar
        title="任务中心"
        style={{
          paddingTop: barHeight || 0
        }}
      />
      <div className="yun"></div>
      <div className="my_data">
        <div className="i">
          <div className="icon"></div>连续签到天数
        </div>
        <div className="num">
          {userInfo?.sign_nums || 0}
          <span> 天</span>
        </div>
      </div>
      <div className="sigin_info">
        <div className="sigin_list">
          <div className="sigin_day_txt">
            连续签到赢大奖
            {/* 周签到<span>{userInfo?.sign_nums || 0}</span>天 */}
          </div>
          {/* <div className="vip_tips"></div> */}
          <div className="sigin_con">
            <div className="sigin_in_days">
              {data.map((item, idx) => (
                <div
                  className="sigin_item"
                  key={String(idx)}
                  onClick={() => {
                    if (idx === 6) {
                      setGiftVisible(true)
                    }
                  }}
                >
                  <div className="icon"></div>
                  <div
                    className={`info ${idx + 1 <= userInfo?.sign_nums ? 'down' : ''} ${!userInfo?.today_is_sign && idx === userInfo?.sign_nums ? 'ready' : ''} ${idx === 6 ? 'gift' : ''}`}
                  >
                    {/* <div className="point"><span>{(idx === 6 ? 7 : 1) * (userInfo?.vipLevel ? 2 : 1)}</span></div> */}
                  </div>
                  {idx === 6 ? (
                    <div className="tips">
                      <span>点击查看</span>
                    </div>
                  ) : null}
                  <div className={`day_txt ${idx + 1 <= userInfo?.sign_nums ? 'down' : ''}`}>{`第${idx + 1}天`}</div>
                  {/* <div className="day_txt">{(userInfo?.today_is_sign ? (userInfo?.sign_nums - 1) : userInfo?.sign_nums) === idx ? '今天' : `第${idx + 1}天`}</div> */}
                </div>
              ))}
            </div>
            <div onClick={signIn} className={`sigin_btn ${!userInfo?.today_is_sign ? 'active' : ''}`}>
              {userInfo?.today_is_sign ? '已签到' : '签到'}
            </div>
          </div>
        </div>
      </div>
      <Mask visible={giftVisible}>
        <div className="gift_modal">
          <div className="content">
            {giftList.map((item) => (
              <div
                className={`item ${selectGift === item.id ? 'active' : ''}`}
                key={item.id}
                onClick={() => {
                  if (!giftStatus) {
                    setSelectGift(item.id)
                  }
                }}
              >
                <div className="icon">
                  <span>{item.expire}天</span>
                </div>
                <img alt="" src={item.show_img} className="img"></img>
                <div className="desc">
                  <span>{giftType[item.type]}</span>
                </div>
              </div>
            ))}
            {/* <div className="gift_bg2"></div> */}
          </div>
          <div className={`btn ${userInfo?.sign_nums === 6 && !userInfo.today_is_sign ? 'acitve' : 'un'}`} onClick={getGift}>
            {giftStatus ? '奖励已领取，请前往背包查看' : +userInfo?.sign_nums === 6 && !userInfo.today_is_sign ? '确认领取' : '继续签到'}
          </div>
          <div className="close" onClick={() => setGiftVisible(false)}></div>
        </div>
      </Mask>
    </div>
  )
}
